<template>
  <div class="main">
    <div
      class="title-box"
      :class="[item.active ? '' : 'title-box-nobg']"
      v-for="item in formItem"
      :key="item.key"
      @click.stop="handleItem(item)"
    >
      <div class="in-box" :class="[item.active ? '' : 'in-box-nobg']">
        <img v-if="item.active" class="jiao" src="@/assets/home/jiao.png" />
        <img v-if="item.active" class="img" src="@/assets/home/title.png" />

        <span style="font-weight: 400; font-size: 16px">{{ item.title }}</span>
        <!-- <a-icon type="edit" @click.stop="handleEdit(item)" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: {
    formItem: {
      type: Array,
      default: []
    }
  },
  methods: {
    handleItem(item) {
      this.$store.dispatch('user/updateShow', false);
      this.$emit('handleDetailItem', item, true);
    }
    // handleEdit(item) {
    //   this.$emit('handleDetailItem', item, false);
    // }
  }
};
</script>

<style scoped lang="scss">
.main {
  .title-box {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 4px 8px;
    background: #021c2e;
    margin-top: 8px;
    margin-bottom: 4px;
    border-radius: 4px;

    .in-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      background: linear-gradient(90deg, rgba(22, 102, 240, 0.6) 0%, rgba(22, 102, 240, 0) 100%);
      padding-left: 8px;
      .jiao {
        position: absolute;
        left: -5px;
        top: -5px;
        width: 20px;
        height: 20px;
      }
      .img {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .in-box-nobg {
      background: rgba(22, 102, 240, 0.2);
    }
  }
  .title-box-nobg {
    background: rgba(22, 102, 240, 0.2);
  }
}
</style>
